import React from 'react'
import { Button, WhiteSpace, WingBlank } from 'antd-mobile'
import FootBar from './FootBar_panel'
class Panel extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      currentCount: 0, // 当前的题目
      selectType: ['', '', '', ''],
      score: 0,
      endTime: 15,
      timer: null,
      type: '',
    }
  }
  render() {
    console.log('xxxx', this.props)
    let question = null
    if (this.props.stateMsg.type === 'Career') {
      question = this.props.info.bareerQuestionList[
        this.props.info.location.state.info
      ]
    } else if (this.props.stateMsg.type === 'Special') {
      question = this.props.info.typeQuestionList[0]
    } else {
      this.props.info.history.push('/')
    }
    // return <div>hello</div>
    // let quetionList = this.props.quetionList
    // console.log(this.props)
    if (
      this.props.info.bareerQuestionList.length === 0 &&
      this.props.stateMsg.type === 'Career'
    ) {
      this.props.info.history.push('/career')
      return null
    } else {
      // let questionItem = quetionList[this.state.currentCount]
      // let asersList = JSON.parse(questionItem.options)
      // this.startEnd()
      return (
        <div>
          <div className="main_container">
            <div className="endTime">
              <div className="timeContainer">{this.state.endTime}</div>
            </div>
            <h2>
              {this.state.currentCount + 1}:{question.quiz}
            </h2>
            <div>
              {JSON.parse(question.options).map((item, index) => {
                return (
                  <WingBlank key={index}>
                    <Button
                      type={this.state.selectType[index]}
                      onClick={() => {
                        this.chooseAnser(index, question)
                      }}
                    >
                      {item}
                    </Button>
                    <WhiteSpace />
                  </WingBlank>
                )
              })}
            </div>
          </div>
          <FootBar></FootBar>
        </div>
      )
    }
  }

  getType = () => {
    if (this.props.location.state.info) {
      this.setState({
        type: 'career',
      })
    } else {
      this.setState({
        type: 'barrier',
      })
      this.props.getQuestionList()
    }
  }

  // 开始倒计时
  startEnd = () => {
    if (this.state.timer == null) {
      console.log('kkk', this.state)
      let timer = setInterval(() => {
        let time = this.state.endTime
        if (time === 0) {
          clearInterval(timer)
          this.timeEnd()
        } else {
          this.setState({
            endTime: --time,
          })
        }
      }, 1000)
      this.setState({
        timer: timer,
      })
    }
  }

  // 选择答案
  chooseAnser = (index, question) => {
    clearInterval(this.state.timer)
    console.log('click', index, question)
    if (index + 1 === Number(question.answer)) {
      let selectArr = this.state.selectType
      selectArr[index] = 'primary'
      this.setState({
        selectType: selectArr,
        score: this.state.score + 10,
        endTime: '√',
      })
    } else {
      let selectArr = this.state.selectType
      selectArr[index] = 'warning'
      selectArr[question.answer - 1] = 'primary'
      this.setState({
        selectType: selectArr,
        score: this.state.score + 0,
        endTime: '×',
      })
    }

    // this.toNextQuetion()
  }

  // 跳转
  toNextQuetion = () => {
    setTimeout(() => {
      let nowCount = this.state.currentCount
      nowCount++
      let currentCount = nowCount
      if (currentCount === 10) {
        this.props.history.push('/success', { score: this.state.score })
      } else {
        this.setState({
          currentCount: currentCount,
          selectType: ['', '', '', ''],
          endTime: 15,
          timer: null,
        })
      }
      // this.startEnd()
    }, 2000)
  }

  // 时间截止
  timeEnd = () => {
    let nowquetion = this.props.quetionList[this.state.currentCount]
    console.log(nowquetion)
    let anser = nowquetion.answer
    let selectType = this.state.selectType
    selectType[anser - 1] = 'primary'
    this.setState({
      selectType: selectType,
    })
    this.toNextQuetion()
  }
}

export default Panel
